<style lang="less">
    @import '../../../styles/common.less';
</style>

<template>
    <div>
        <p slot="header" style="height: 30px">

        </p>
        <Form ref="user" :model="user" :rules="ruleValidate" label-position="left">
            <Row>
                <Col span="11">
                    <Card>
                        <p slot="title">用户信息</p>
                        <Form-item label="姓名：" prop="name">
                            <Input v-model="user.name" placeholder="姓名" type="text"/>
                        </Form-item>
                        <Form-item label="账号：" prop="account">
                            <Input v-model="user.account" placeholder="账号" type="text"/>
                        </Form-item>
                        <Form-item label="昵称：" prop="nickname">
                            <Input v-model="user.nickname" placeholder="昵称" type="text"/>
                        </Form-item>
                        <Form-item label="手机：" prop="mobile">
                            <Input v-model="user.mobile" placeholder="手机" type="text"/>
                        </Form-item>
                        <Form-item label="邮箱：" prop="email">
                            <Input v-model="user.email" placeholder="邮箱" type="text"/>
                        </Form-item>
                        <Form-item label="性别：" prop="gender">
                            <Select v-model="user.gender">
                                <Option value="1">男</Option>
                                <Option value="2">女</Option>
                                <Option value="3">保密</Option>
                            </Select>
                        </Form-item>
                        <Form-item label="状态：" prop="flag">
                            <RadioGroup v-model="user.flag">
                                <Radio label="1">启用</Radio>
                                <Radio label="0">禁用</Radio>
                            </RadioGroup>
                        </Form-item>
                    </Card>
                </Col>
                <Col span="12" offset="1">
                    <Card>
                        <p slot="title">扩展信息</p>
                        <Form-item label="个性签名：" prop="signature">
                            <Input v-model="user.signature" placeholder="个性签名" type="textarea"/>
                        </Form-item>
                        <Form-item label="QQ：" prop="QQ">
                            <Input v-model="user.QQ" placeholder="QQ" type="text"/>
                        </Form-item>
                        <Form-item label="出生日期：" prop="birthdate">
                            <DatePicker
                                    v-model="birthdate"
                                    :start-date="new Date()"
                                    type="date"
                                    placeholder="出生日期">
                            </DatePicker>
                        </Form-item>
                        <Form-item label="故乡：" prop="homeAddress">
                            <Input v-model="user.homeAddress" placeholder="故乡" type="text"/>
                        </Form-item>
                        <Form-item label="所在地：" prop="locationAddress">
                            <Input v-model="user.locationAddress" placeholder="所在地" type="text"/>
                        </Form-item>
                        <Form-item label="星座：" prop="constellation">
                            <Select v-model="user.constellation">
                                <Option value="">保密</Option>
                                <Option value="1">白羊座</Option>
                                <Option value="2">金牛座</Option>
                                <Option value="3">双子座</Option>
                                <Option value="4">巨蟹座</Option>
                                <Option value="5">狮子座</Option>
                                <Option value="6">处女座</Option>
                                <Option value="7">天秤座</Option>
                                <Option value="8">天蝎座</Option>
                                <Option value="9">射手座</Option>
                                <Option value="10">魔羯座</Option>
                                <Option value="11">水瓶座</Option>
                                <Option value="12">双鱼座</Option>
                            </Select>
                        </Form-item>
                        <Form-item label="血型：" prop="blood">
                            <Select v-model="user.blood">
                                <Option value="">保密</Option>
                                <Option value="A">A型</Option>
                                <Option value="B">B型</Option>
                                <Option value="AB">AB型</Option>
                                <Option value="O">O型</Option>
                                <Option value="other">其他血型</Option>
                            </Select>
                        </Form-item>
                        <Form-item label="简介：" prop="introduce">
                            <Input v-model="user.introduce" placeholder="介绍" type="textarea"/>
                        </Form-item>
                    </Card>
                </Col>
            </Row>
            <div class="footer-item">
                <Form-item>
                    <Button type="primary" size="large" @click="handleSubmit" long>
                        提交
                    </Button>
                </Form-item>
            </div>
        </Form>
    </div>
</template>

<script>

    import userRequest from '../../../app/api/core/user';
    import prompt from '@/libs/prompt';
    import * as base from '../../../app/common/lib/base';
    import boxUtil from '../../../app/common/lib/box.util';
    import propertyUtil from '../../../app/common/lib/property.util';

    export default {
        name: 'user-edit',
        props: {
            userId: {
                type: String
            }
        },
        data() {
            const valideRepeatPassword = (rule, value, callback) => {
                if (value !== this.user.password) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            };
            const isExit = (rule, value, callback) => {
                userRequest.isExist(this.user.id, this.user.account, function (data) {
                    var body = data.body;
                    if (body.exist === true) {
                        return callback(new Error('账号已存在！'));
                    } else {
                        callback();
                    }
                });
            };
            return {
                currentId: this.userId,
                user: this.getData(),
                repeatPassword: '',
                birthdate: this.getDate(-3650), // 出生日期
                ruleValidate: {
                    name: [
                        {required: true, message: '姓名不能为空', trigger: 'blur'}
                    ],
                    account: [
                        {required: true, message: '账号不能为空', trigger: 'blur'},
                        {validator: isExit, trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            init() {
                this.load();
            },
            setCurrentId(id) {
                this.editType = id ? '1' : '0';
                if (id === this.currentId) return;
                this.currentId = id;
            },
            load() {
                var own = this;
                userRequest.getInfo(own.currentId, function (data) {
                    // var info = data.info;
                    var body = data.body;
                    if (body && body.user) {
                        own.user = body.user;
                        var bd = own.user.birthdate;
                        if (bd) {
                            own.birthdate = base.toDate(bd);
                        } else {
                            own.birthdate = own.getDate(-3650);
                        }
                    } else {
                        own.user = own.getData();
                    }
                });
            },
            getDate(value) {
                var date = new Date();
                date.setDate(date.getDate() + value);
                return date;
            },
            getData() {
                var data = {
                    id: '',// 用户Id
                    account: '',// 帐号
                    password: '',// 密码
                    // createTime:'',// 建立时间
                    // updateTime:'',//
                    flag: '1',// 有效标志 1：启用 0：停用
                    email: '',
                    name: '',// 姓名
                    gender: '',// 性别,1:男 2:女 3:保密
                    // /基本信息
                    avatar: '',// 自定义照片
                    mobile: '',// 手机
                    email: '',// 电子信箱
                    qq: '',// qq
                    identityCard: '',// 身份证号码
                    remark: '',// 备注
                    introduce: '',// 个人简介
                    nickname: '',// 昵称
                    signature: '',
                    QQ: '',
                    birthdate: null,
                    homeAddress: '',
                    locationAddress: '',
                    constellation: '',
                    blood: ''
                };
                return data;
            },
            handleSubmit() {
                var own = this;
                var user = own.user;
                var birthdate = own.birthdate; //

                if (birthdate) {
                    user.birthdate = birthdate.format('yyyy-MM-dd');
                } else {
                    user.birthdate = null;
                }
                this.$refs['user'].validate((valid) => {
                    if (valid) {
                        userRequest.addOrUpdate(user, function (data) {
                            var info = data.info;
                            var user = data.body.user;
                            own.$emit('on-done', own, info, user);
                        });
                    }
                });
            }
        },
        watch: {
            userId(val) {
                this.setCurrentId(val);
                this.init();
            }
        },
        mounted() {
            this.init();
        }
    };
</script>
